<template>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>审核列表</span>
            </div>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    :data="list"
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="userName"
                        label="用户"
                >
                    <template slot-scope="scope">
                        <div class="flex flex-y-top">
                            <div class="">
                                <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                            </div>
                            <div class="mar_l10">
                                <div class="flex">
                                    <div class="">{{scope.row.userName}}</div>
                                    <el-tag size="mini" type="info" class="mar_l5">（Id:{{scope.row.userId}}）</el-tag>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="图片"
                >
                    <template slot-scope="scope">
                      <div class="flex flex-y-top">
                        <el-popover trigger="hover" placement="top">
                            <p><img :src="scope.row.media" class="listImgWidth"/></p>
                            <div slot="reference" class="name-wrapper">
                                <div class="imgbox"><img :src="scope.row.media" class="goodlogo"/></div>
                            </div>
                        </el-popover>
                      </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createdAt"
                        label="提交时间"
                        width="380"
                >
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="审核状态"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.state=='1'">待审核</div>
                        <div v-if="scope.row.state=='3'">已拒绝</div>
                        <div v-if="scope.row.state=='2'">已通过</div>
                    </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                        prop="type"-->
                <!--                        label="奖励发放效果"-->
                <!--                >-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <div>发放失败</div>-->
                <!--                        <div>已发放</div>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="display"-->
                <!--                        label="状态"-->
                <!--                >-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"-->
                <!--                                   @change="changeSwitch(scope.row)"></el-switch>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <!--                            <el-button type="text" @click="handletj(scope.row)">统计</el-button>-->
                            <el-button type="text" @click="changeSwitch(scope.row,1)" v-show="scope.row.state=='1'">通过</el-button>
                            <el-button type="text" @click="changeSwitch(scope.row,2)" v-show="scope.row.state=='1'">拒绝</el-button>
                            <el-button size="mini" style="color: #489620" v-show="scope.row.state=='2'" type="text">已通过</el-button>
                            <el-button size="mini" style="color: #df0029" v-show="scope.row.state=='3'" type="text">已拒绝</el-button>
                            <!--                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {collection, modifyCollection} from "@/api/plug";

    export default {
        created() {
            this.fetchData();
        },
        data() {
            return {
                list: [
                    // {
                    //     name:'新客立减活动',
                    //     time:'2020-9-21 08:00:00——2020-9-22 20:00:00',
                    //     money:'20',
                    //     type:'当前门店',
                    // }
                ],
                // listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await collection({page: this.page.currentPage});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            async changeSwitch(row, type) {
                const {msg} = await modifyCollection({id: row.id, type,});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyNewReduction({id: row.id, type: 2});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyNewReduction({id, type: 2});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            // handletj(){
            //     this.$router.push({path: 'customertongji'})
            // },
            // handleEdit(row) {
            //     if (row.id) {
            //         this.$router.push(`/collectionAdd?id=${row.id}`);
            //     } else {
            //         this.$router.push({path: 'collectionAdd'})
            //     }
            // },
        }
    }
</script>
<style lang="scss" scoped>
    .listImgWidth {
        width: 300px;
        height: 300px;
    }
</style>
